import { Link, Outlet } from "umi";
import { useEffect, useRef, useState } from "react";
import styles from "./index.less";

export default function Layout() {
  const [isShow, setIsShow] = useState(styles.hover_hide);
  const domRef = useRef(null);

  useEffect(() => {
    const dom = domRef.current;

    const handleMouseOver = () => setIsShow("");
    const handleMouseOut = () => setIsShow(styles.hover_hide);

    dom.addEventListener("mouseover", handleMouseOver);
    dom.addEventListener("mouseout", handleMouseOut);

    return () => {
      dom.removeEventListener("mouseover", handleMouseOver);
      dom.removeEventListener("mouseout", handleMouseOut);
    };
  }, []);

  return (
    <div className={styles.content}>
      <div className={styles.head}>
        <div className={styles.info}>
          <div className={styles.icon}></div>
          <div className={styles.text}>产品介绍</div>
        </div>

        <div className={styles.recharge}>充值</div>
      </div>

      <div className={styles.body}>
        <div className={styles.phone_box}></div>
        <div className={styles.body_text}>
          <div className={styles.body_icon}></div>
          <div className={styles.body_content}>
            打造一個專注於聲音的社交空間。
            <br />
            在這裡你可以展示你的才華、傾訴自己的心事、聆聽別人的想法,
            開始一段細水流長的感情。
          </div>

          <div className={styles.dowload}>
            <div className={styles.btn}>
              <div className={styles.btn_icon}></div>
              <p className={styles.btn_text_left}>Android</p>
              <p className={styles.btn_text_right}>下载</p>
            </div>

            <div className={`${styles.btn} ${styles.btn_right}`}>
              <div className={styles.btn_icon}></div>
              <p className={styles.btn_text_left}>IOS</p>
              <p className={styles.btn_text_right}>下载</p>
            </div>
          </div>
        </div>
      </div>

      {/* <div className={styles.bg1}></div> */}
      {/* <div className={styles.bg2}></div> */}

      <div className={styles.footer}>
        <div className={styles.footer_top}>
          <div className={styles.footer_text}>用户协议</div>
          <div className={styles.line}></div>
          <div className={styles.footer_text}>隐私政策</div>
          <div className={styles.line}></div>
          <div className={`${styles.footer_text} ${styles.hover}`} ref={domRef}>
            联系我们
          </div>
          <div className={`${styles.hover_show} ${isShow}`}>
            地址：RM 101A, 1/F., GENPLAS IND BUILDING, 56 HOI YUEN ROAD KWUN
            TONG, HONG KONG
          </div>
        </div>

        <div className={styles.name}>SYNCING LIMITED</div>
      </div>
    </div>
  );
}
